<!DOCTYPE html>
<html>

<head>
    <!-- 有一个父div，宽度是100%，父div下面有3个子div，等宽，平分父div宽度 -->
    <meta charset="utf-8">
    <title>图片预览</title>


    <style>
        body {
            text-align: center;
            margin: 0;
        }

        button {
            background-color: #d4000054;
            border: 0;
            color: #ffffff9c;
            width: 100px;
            height: 50px;
            position: fixed;
            cursor: pointer;
        }

        button:hover{
            background-color: #d400008c;
            color: #ffffffd1;
        }

        .btn1 {
            left: 0;
            top: 50%;
        }

        .btn2 {
            right: 0;
            top: 50%;
        }
    </style>

    <script>


        var atlasId = "34559";//图集id

        var current = 1;

        function toPage(num) {
            img.src = "https://img.hywly.com/a/1/" + atlasId + "/" + num + ".jpg";

document.getElementById("btn1").value = "上一页 " + num-1;
document.getElementById("btn2").value = "下一页 " + num+1;
        }

        function previous() {
            current--;
            toPage(current);
        }

        function next() {
            current++;
            toPage(current);
        }

    </script>
</head>

<body>
    <button id="btn1" class="btn1" onclick="previous()">上一页</button>
    <img id="img" src="https://img.hywly.com/a/1/33053/10.jpg">
    <button id="btn2" class="btn2" onclick="next()">下一页</button>

</body>

</html>